<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8" content="text/html; charset=utf-8">
    <title>Title</title>
    <script src="../static/js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        var intDiff = parseInt(500000); //倒计时总秒数量

        function timer(intDiff) {
            window.setInterval(function() {
                var day = 0,
                    hour = 0,
                    minute = 0,
                    second = 0; //时间默认值
                if (intDiff > 0) {
                    day = Math.floor(intDiff / (60 * 60 * 24));
                    hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
                    minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
                    second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
                }
                if (minute <= 9) minute = '0' + minute;
                if (second <= 9) second = '0' + second;
                $('#day_show').html(day + "天");
                $('#hour_show').html('<s id="h"></s>' + hour + '时');
                $('#minute_show').html('<s></s>' + minute + '分');
                $('#second_show').html('<s></s>' + second + '秒');
                intDiff--;
            }, 1000);
        }

        $(function() {
            timer(intDiff);
        });
    </script>
</head>
<body>
    <h1>商品详情</h1>
    <form >
        <table border="1">
            <tr>
                <td>商品名称</td>
                <td th:text="${goods.getGoodsName()}"></td>
            </tr>
            <tr>
                <td>秒杀价</td>
                <td ><input type="text" th:value="${activity.miaoshaPrice}" name="goodsPrice" disabled></td>
            </tr>
            <tr>
                <td>库存数量</td>
                <td th:text="${activity.stockCount}"></td>
            </tr>
            <tr>
                <td>秒杀开始时间</td>
                <td id="time" th:text="${#dates.format(activity.startDate,'yyyy-MM-dd hh:mm:ss')}">
                    <span th:text="'距离开始还有'">
                    <div class="time-item">
                    <span id="day_show">0天</span>
                    <strong id="hour_show">0时</strong>
                    <strong id="minute_show">0分</strong>
                    <strong id="second_show">0秒</strong>
                    </div>
                    </span>
                    <span th:text="'距离结束还有'"></span>
                    <span >秒杀活动已结束</span>
                </td>
            </tr>
            <tr>
                <td>秒杀结束时间</td>
                <td th:text="${#dates.format(activity.endDate,'yyyy-MM-dd hh:mm:ss')}"></td>
            </tr>
            <tr>
                <td>商品数量</td>
                <td><input type="text" name="goodsCount">
                    <input type="hidden" name="userId" th:value="${goods.id}">
                    <input type="hidden" name="goodsChannel" th:value="1">
                    <input type="hidden" name="activityId" th:value="${activity.id}">
                </td>
            </tr>
            <tr colspan="2px">
                <td ><input type="button" onclick="add()" value="秒杀"></td>
            </tr>
        </table>
    </form>
<script>
    function add(){
        $.post(
            "/activity/orderinfo/save",
            $("form").serialize(),
            function (data){
                alert(data.msg)
                if (data.code==0){
                    location="/order?id="+data.id
                }
            },"json"
        )
    }
</script>
</body>
</html>